<template>
  <div class="mobile-preview">
    <div class="mobil-container" v-if="this.content ? true : false">
      <div class="title">亲爱的用户您好！</div>
      <div class="name">{{this.name}}</div>
      <div class="time">{{this.time}}</div>
      <div class="content" v-html="this.content"></div>
    </div>
    <div v-else>
      <div class="mobil-container">无预览内容展示</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "pc-preview",
  data() {
    return {};
  },
  props: ["name", "content", "time"],
  methods: {}
};
</script>

<style lang="scss" scoped>
.mobile-preview {
  padding: 20px;
  font-size: 14px;
  .mobil-container {
    background: #f5f7fa;
    width: 300px;
    padding: 20px;
    margin: 0 auto;
  }
  .title {
    color: #000;
  }
  .name,
  .time {
    color: rgb(170, 167, 167);
  }
  .content {
    color: #000;
    width: 100%;
    word-wrap: break-word;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
.wscnph {
  width: 100%;
}
</style>

